<template>
    <div class='path-index container'>
        <Header></Header>
        <section>
            <ul v-if='list'>
                <li 
                    v-for='(item,index) in list'
                    :key='index'
                    @click='goList(item)'
                >
                    <div>
                        <span>{{item.name}}</span>
                        <span>{{item.tel}}</span>
                    </div>
                    <div>
                        <span class='active' v-if=' item.isDefault == 1 '>[默认]</span>
                        <span>{{item.province}}</span>
                        <span>{{item.city}}</span>
                        <span>{{item.county}}</span>
                        <span>{{item.addressDetail}}</span>
                    </div>
                </li>
            </ul>
            <h1 v-else>暂无数据...</h1>
            <div class='add-path' @click='goList("add")'>
                <span>添加地址</span>
            </div>
        </section>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue'
import Header from './Header.vue'
import http from '@/common/api/request.js'
import {mapState,mapMutations} from 'vuex'
import bus from '@/common/bus.js'
export default{
    data () {
        return {
            typeSelect:false
        }
    },
    components:{
        Header,
        Tabbar
    },
    computed:{
      ...mapState({
          list:state=>state.path.list
      })  
    },
    created(){
        //证明是从提交订单页面进来的
        if( this.$route.query.type =='select' ){
            this.typeSelect = true;
        }
        
        this.getData();
    },
    methods:{
        ...mapMutations(['initData']),
        getData(){
            http.$axios(  {
            	url:'/api/selectAddress',
                method:"post",
                headers:{
                    token:true
                }
            }).then(res=>{
                this.initData( res.data )
            })
        },
        goList( add ){
            
            //是从提交订单进入的
            if( this.typeSelect ){
                
                //自定义事件名称
                bus.$emit('selectPath', JSON.stringify(add) );
                
                this.$router.back();
                
            }else{
            //是从我的地址进来的
                this.$router.push({
                    name:'path-list',
                    params:{
                        key:add
                    }
                })
            }
        }
    }
}
</script>

<style lang='scss' scoped>
section{
    background-color: #f7f7f7;
    ul li {
        padding:0.4rem;
        margin:0.266666rem 0;
        font-size:0.373333rem;
        background-color: #FFFFFF;
        div{
            line-height: 0.613333rem;
            span{
                padding-right:0.266666rem;
            }
        }
    }
    .add-path{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top:0.8rem;
        span{
            width: 8rem;
            line-height: 1.066666rem;
            color:#fff;
            font-size:0.48rem;
            text-align: center;
            background-color: #b0352f;
            border-radius: 6px;
        }
    }
}
.active{
    color:#b0352f;
}
</style>
